@import "./mixins";
.unis-{
	&header {
		display: flex;
		justify-content: flex-start;
		flex-flow: nowrap;
		align-items: center;
		padding: 0.571rem 1.714rem;
		background: #FFFFFF;
		box-shadow: 0px 2px 10px rgba(44, 60, 89, 0.07);
		color: #8E97A7;
		& > .nav {
			padding: 0.571rem 0;
			margin-right: 2.286rem;
			cursor: pointer;
			position: relative;
			& > i {
				&:nth-of-type(1) {
					margin-right: 1.143rem;
					font-size: 1.143rem;
				}
				&:nth-of-type(2) {
					margin-left: 0.571rem;
				}
			}
			& > .drop-box {
				display: none;
				position: absolute;
				top: calc(100% - 0.2rem);
				padding-top: 1.5rem;
				left: 0rem;
				background: none;
				border-radius: 0.286rem;
				transition: all 0.5s;
				& > ul {
					position: relative;
					width: 100%;
					height: 100%;
					margin: 0;
					border-radius: 0.286rem;
					padding: 0.857rem 0;
					box-shadow: 0px 7px 20px rgba(44, 60, 89, 0.07);
					&:before {
						content: '';
						position: absolute;
						top: -1.714rem;
						left: 4.643rem;
						border-width: 0.857rem;
						width: 0;
						height: 0;
						border-style: solid;
						border-color: transparent transparent #FFFFFF transparent;
					}
					& > li {
						padding: 0.857rem 1.143rem;
						min-width: 14.286rem;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						font-weight: 500;
						font-size: 0.929rem;
						letter-spacing: 0.021rem;
						background: #FFFFFF;
						&:first-child {
							border-radius: 0.286rem 0.286rem 0 0;
						}
						&:last-child {
							border-radius: 0 0 0.286rem 0.286rem;
						}
						& > a, button {
							text-decoration: none;
							display: block;
							transition: all 0.5s;
							color: #8E97A7;
							border: none;
							outline: none;
							background: none;
							padding: 0;
							text-align: left;
							width: 100%;
							height: 100%;
							&:hover {
								transition: all 0.5s;
								color: #56A7FD;
							}
							&:focus {
								border: none;
								outline: none;
								background: none;
							}
							& > i {
								font-size: 1.2rem;
								margin-right: 1.143rem;
							}
						}

					}

				}
			}
			&:hover {
				.drop-box {
					display: block;
					transition: all 0.5s;
				}
			}
			&.not {
				.drop-box {
					top: calc(100% + 0.2rem) !important;
					background: #D5E9FA !important;
					padding-top: 0 !important;
					border-radius: 0.429rem !important;
					right: -3.48rem !important;
					left: inherit !important;
					box-shadow: none !important;
					& > ul {
						border-radius: 0.429rem !important;
						padding: 0;
						&:before {
							content: '';
							position: absolute;
							top: -1.714rem;
							left: inherit;
							right: 3rem;
							border-color: transparent transparent #D5E9FA transparent;
						}
						& > li {
							border-radius: 0.429rem !important;
							white-space: nowrap;
							padding: 1rem 0 !important;
							background: #D5E9FA;
							display: inline-block;
							color: #56A7FD;
							-webkit-transform: scale(0.8);
							font-size: 0.786rem !important;;
							-webkit-text-size-adjust: none;
							&:hover {
								color: #56A7FD;
								background: #D5E9FA;
							}
						}

					}
					&.left {
						top: -0.40rem !important;
						right: inherit !important;
						left: calc(100% + 1rem) !important;
						& > ul {
							border-radius: 0.429rem !important;
							&:before {
								top: 20% !important;
								left: -1.7rem !important;
								right: inherit;
								border-color: transparent #D5E9FA transparent transparent !important;
							}
						}
					}
				}
			}

		}
		& > .user {
			width: 2.286rem;
			height: 2.286rem;
			border-radius: 100%;
			margin-left: auto;
			font-weight: 500;
			line-height: 2rem;
			cursor: pointer;
			text-align: center;
			color: #FFFFFF;
			display: block;
			letter-spacing: 0.021rem;
			position: relative;
			& > .drop-box {
				display: none;
				position: absolute;
				right: 0;
				top: calc(100% - 0.5rem);
				padding-top: 1.5rem;
				& > ul {
					list-style: none;
					position: relative;
					background: #FFFFFF;
					box-shadow: 0px 7px 20px rgba(44, 60, 89, 0.07);
					border-radius: 0.429rem;
					padding: 0.286rem 0;
					&:before {
						content: '';
						position: absolute;
						top: -1.714rem;
						right: 0.5rem;
						border-width: 0.857rem;
						width: 0;
						height: 0;
						border-style: solid;
						border-color: transparent transparent #ffffff transparent;
					}
					& > li {
						padding: 0;
						white-space: nowrap;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						color: #8E97A7;
						text-align: left;
						&:first-child {
							padding: 0.286rem 1.143rem !important;
							border-bottom: 1px solid #E9EBEF;
							font-weight: 600;
							font-size: 9px;
							letter-spacing: 0.4px;
							color: #2C3C59;
						}
						& > .head {
							width: 1.714rem;
							height: 1.714rem;
							display: block;
							overflow: hidden;
							background: #56A7FD;
							border-radius: 1.714rem;
							margin-right: 1.143rem;
						}
						& > button {
							width: 100%;
							padding: 0.286rem 1.143rem;
							margin: 0;
							display: block;
							background: none;
							border: none;
							outline: none;
							text-align: left;
							color: #8E97A7;
							cursor: pointer;
							transition: all 0.5s;
							&:hover {
								transition: all 0.5s;
								color: #56A7FD;
							}
							&:focus {
								outline: none;
								background: none;
								border: none;
								color: #56A7FD;

							}

						}
					}
				}
			}
			&:hover {
				& > .drop-box {
					display: block;
				}
			}

		}
	}
	&aside {
		&.shrink {
			width: 64px !important;
			@include transitionAll5(0.5s,width);
			& > .logo-box {
				& > .spread {
					& > i {
						width: 1.557rem;
						height: 0.143rem;
						background: #FFFFFF;
						display: block;
						position: relative;
						&:before {
							left: 60%;
							right: 0;
							@include transitionAll5;
						}
						&:after {
							left: 40%;
							right: 0;
							@include transitionAll5;
						}
					}

				}
				& > .logo {
					font-size: 2.857rem;
					color: #FFFFFF;
					margin-left: 1.511rem;
				}
			}
			& > .project-name {
				display: none;
			}
			& > .project-name-shrink {
				display: block;
			}
		}
		height: 100%;
		width: 240px;
		@include transitionAll5(0.5s,width);
		overflow: hidden;
		background: #2C3C59;
		& > .logo-box {
			padding: 1.714rem 1.766rem;
			width: 240px;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			& > .spread {
				width: 1.557rem;
				height: 1.4rem;
				cursor: pointer;
				& > i {
					width: 1.557rem;
					height: 0.143rem;
					background: #FFFFFF;
					display: block;
					position: relative;
					&:before {
						content: '';
						position: absolute;
						bottom: -400%;
						left: 0;
						right: 60%;
						height: 0.143rem;
						background: #FFFFFF;
						@include transitionAll5;
					}
					&:after {
						content: '';
						position: absolute;
						bottom: -800%;
						left: 0;
						right: 40%;
						height: 0.143rem;
						background: #FFFFFF;
						@include transitionAll5;
					}
				}

			}
			& > .logo {
				font-size: 2.857rem;
				color: #FFFFFF;
				margin-left: 1.511rem;
			}
		}
		& > .project-name {
			padding-left: 1.766rem;
			padding-top: 1.143rem;
			display: block;
			width: 240px;
			color: #FFFFFF;
		}
		& > .project-name-shrink {
			display: none;
			padding-top: 1.143rem;
			text-align: center;
			color: #FFFFFF;
		}
		& > ul {
			padding: 1.143rem 0 0 0;
			width: 240px;
			& > li {
				padding: 0 1.039rem 0 1.766rem;
				min-height: 3.429rem;
				line-height: 3.429rem;
				display: flex;
				position: relative;
				align-items: center;
				width: 240px;
				color: #FFFFFF;
				flex-flow: wrap;
				font-size: 1.143rem;
				& > input[type=radio] {
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					display: block;
					width: 100%;
					font-size: 100rem;
					height: 3.429rem;
					cursor: pointer;
					filter: alpha(opacity=0);
					-moz-opacity: 0;
					-khtml-opacity: 0;
					opacity: 0;
					&:checked ~ {
						ul {
							background: rgba(0, 0, 0, 0.15);
							& > li {
								min-height: 2rem;
								padding: 0.643rem 0 !important;
								@include transitionAll5;
								a, .a {
									height: auto !important;
									overflow: inherit;
								}
							}
						}
						.bors {
							bottom: 0;
							@include transitionAll5(0.8s);
						}
						.active_bg {
							display: block!important;
						}
						.unis-arrow{
							-webkit-transform: rotate(90deg);
							@include transitionAll5(0.8s);
						}
					}

				}
				& > .bors {
					position: absolute;
					top: 0;
					display: block;
					bottom: 100%;
					left: 0;
					width: 0.286rem;
					background: #56A7FD;
					transition: all 0.8s;
				}
				& > .active_bg {
					position: absolute;
					top: 0;
					display: none;
					left: 0;
					right: 0;
					width: 240px;
					height: 3.429rem;
					background: rgba(0, 0, 0, 0.15);
				}

				& > ul {
					margin-left: -1.766rem;
					margin-right: -1.766rem;
					padding-left: 4.571rem;
					width: 240px;
					list-style: none;
					& > li {
						width: 100%;
						min-height: 0rem;
						line-height: normal;
						display: flex;
						justify-content: flex-start;
						flex-flow: nowrap;
						align-items: center;
						padding: 0;
						@include transitionAll5;
						a, .a {
							text-decoration: none;
							color: #FFFFFF;
							cursor: pointer;
							display: flex;
							align-items: center;
							height: 0px;
							overflow: hidden;
							@include transitionAll5(1s);
							i {
								margin-right: 1rem;
							}
							.circle {
								width: 1.143em;
								height: 1.143em;
								display: inline-block;
								vertical-align: middle;
								position: relative;
								&:before {
									content: " ";
									position: absolute;
									top: 50%;
									left: 50%;
									margin-left: -0.143em;
									margin-top: -0.143em;
									width: 0.286em;
									height: 0.286em;
									border-radius: 0.286em;
									background: currentcolor;
								}

							}

							&:hover {
								color: #56A7FD;
							}
							&.active{
								color: #56A7FD;
							}

						}

					}
				}
				& > i {
					color: #FFFFFF;
					margin-right: 1.766rem;
					font-size: 1.143rem;
				}
				& > .unis-arrow {
					font-size: 0.429rem;
					margin-right: inherit !important;
					margin-left: auto;
					@include transitionAll5(0.8s);
				}

			}
		}

	}
	&btn-set-columns {
		position: relative;
		color: #56A7FD;
		&::after {
			content: '';
			position: absolute;
			top: 100%;
			height: 3px;
			background: #56a7fd;
			left: 0;
			right: 0;
			-webkit-transform: scaleX(0);
			transform: scaleX(0);
			border-radius: 4px;
			transition: -webkit-transform .45s cubic-bezier(0.23, 1, 0.32, 1);
			transition: transform .45s cubic-bezier(0.23, 1, 0.32, 1);
			transition: transform .45s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .45s cubic-bezier(0.23, 1, 0.32, 1);

		}
		&:focus {
			background: none;
			color: #56a7fd;
			box-shadow: none !important;
		}
		&:focus::after {
			-webkit-transform: scaleX(1);
			transform: scaleX(1);
			transition: -webkit-transform .45s cubic-bezier(0.23, 1, 0.32, 1);
			transition: transform .45s cubic-bezier(0.23, 1, 0.32, 1);
			transition: transform .45s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .45s cubic-bezier(0.23, 1, 0.32, 1);
		}
		.ui-box {

			position: absolute;
			top: calc(100% + 0.571rem);
			right: 0;
			background: #FFFFFF;
			box-shadow: 0px 7px 64px rgba(44, 60, 89, 0.07);
			border-radius: 6px;
			& > label {
				font-size: 0.929rem;
				width: 100%;
				line-height: 3rem;
				height: 3rem;
				color: #677388;
				border-bottom: 1px solid #D3D8DE;
				padding: 0;
				margin: 0;
			}
			& > ul {
				margin: 0;
				min-width: 100%;
				padding: 0;
				color: #505C73;
				list-style: none;
				text-decoration: none;
				overflow-x: hidden;
				overflow-y: auto;
				max-height: 15.714rem;
				@include rollBackground;
				li {
					font-size: 1rem;
					text-align: left;
					list-style: none;
					cursor: pointer;
					padding: 0.9286rem 1rem;
					&:hover {
						background: #E9EBEF;
					}
				}
			}
			.operation-box {
				display: flex;
				flex-wrap: nowrap;
				justify-content: flex-end;
				align-items: center;
				align-content: flex-end;
				text-align: right;
				width: 100%;
				height: 4rem;
				border-top: 1px solid #D3D8DE;
				padding: 0 1rem;
				.btn {
					background: none;
					display: inline-block;
					color: #56A7FD;
					border: none;
					cursor: pointer;
					outline: 0;
					&:focus {
						background: none;
						color: #56A7FD;
						border: none;
						outline: 0;
					}
				}
				.save {
					background: #56A7FD;
					border-radius: 4px;
					padding-left: 2.857rem;
					padding-right: 2.857rem;
					margin-left: 1rem;
					color: #FFFFFF;

				}
			}
		}

	}
	&popup-win {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2;
		.position-re {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: Center;
		}
		.modification {
			display: inline-block;
			background: #fff;
			max-width: 37.214rem;
			min-width: 300px;
			box-shadow: 0px 7px 64px rgba(44, 60, 89, 0.07);
			border-radius: 6px;
			.title {
				padding: 1.714rem 2.286rem;
				box-sizing: border-box;
				word-wrap: break-word;
				font-style: normal;
				font-weight: 600;
				font-size: 1.286rem;
				line-height: 1.286rem;
				letter-spacing: 0.3px;
			}
			.content {
				padding:  0 2.286rem;
				flex: 1;
				width: 100%;
				color: #000;
				font-size: 14px;
				max-height:42.857rem ;
				overflow-y: auto;
				line-height: 1.714rem;
				word-wrap: break-word;
			}
			.bottom_box {
				width: 100%;
				box-sizing: border-box;
				font-size: 14px;
				display: flex;
				justify-content:flex-end;

				align-items: center;
				padding: 1.714rem 2.286rem;
			}
		}
	}
	&dates {
		background: #FFFFFF;
		box-shadow: 0px 7px 64px rgba(0, 0, 0, 0.07);
		border-radius: 6px;
		min-height: 2.286rem;
		display: inline-flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 1.143rem;
		position: relative;
		i {
			font-size: 1.143rem;
			margin-right: 1.143rem;
		}
		& > .date-filter {
			position: absolute;
			top: calc(100% + 0.571rem);
			left: 0;
			display:inline-flex;
			flex-direction:row;
			flex-wrap:wrap;
			justify-content: flex-start;
			padding: 1.214rem 1.214rem;
			background: #FFFFFF;
			box-shadow: 0px 7px 64px rgba(44, 60, 89, 0.07);
			border-radius: 6px;
			.date-range {
				display: flex;
				width: 100%;
				justify-content: center;
				align-items: center;
				white-space: nowrap;
				button {
					max-width: 250px;
					background: #FFFFFF;
					border: 1px solid #D3D8DE;
					box-sizing: border-box;
					border-radius: 0.857rem;
					margin-left: 1.143rem;
					&::after{
						bottom: 0.2rem;
					}
					input {
						border-radius: 0.857rem;
						padding: 0.24rem 28px 0.24rem 1rem !important;
						min-height: 24px;
					}
					.disblock{
						display: block;
						height: auto;
						@include transitionAll5;
						border-top: dashed 1px #D3D8DE;
						li {
							padding: 0.9286rem 1rem;
							@include transitionAll5;
						}
					}
					ul {
						display: none;
						height: 0;
						z-index: 100;
						border-top: none;
						li {
							padding: 0;
						}
					}
				}
			}
			.operating-box {
				display: inline-flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;
				.arrow {
					display: inline-block;
					position: relative;
					font-size: inherit;
					width: 0.6em;
					&::after {
						display: inline-block;
						content: " ";
						height: 0.6em;
						width: 0.6em;
						border-width: 0 1px 1px 0;
						border-color: currentcolor;
						border-style: solid;
						-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
						transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
						-webkit-transform-origin: center;
						transform-origin: center;
						transition: -webkit-transform .3s;
						transition: transform .3s, -webkit-transform .3s;
						position: absolute;
						top: 50%;
						left: 50%;
						margin-top: -0.375em;
						margin-left: -0.375em;
					}
				}
			}
			.date-box {
				display: inline-flex;
				justify-content: flex-start;
				flex-direction:row;
				flex-flow: nowrap;
				.date-view {
					padding: 1.143rem;
					width: 22.286rem;
					height: auto;
					display: inline-flex;
					justify-content: flex-start;
					flex-flow: wrap;
					.operating-box {
						display: flex;
						flex-wrap: nowrap;
						justify-content: space-between;
						align-items: center;
						width: 22.286rem;
						font-weight: 600;
						font-size: 13px;
						line-height: 16px;
						text-align: center;
						letter-spacing: 0.4px;
						color: #2C3C59;

						.arrow-box {
							display: inline-block;
							position: relative;
							font-size: 1.143rem;
							width: 1.143rem;
							height: 1.143rem;
							background: #D5E9FA;
							border-radius: 1.143rem;
							cursor: pointer;
							&::after {
								display: inline-block;
								content: " ";
								height: 8px;
								width: 8px;
								border-width: 0 2px 2px 0;
								border-color: #677388;
								border-style: solid;
								-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
								transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
								-webkit-transform-origin: center;
								transform-origin: center;
								transition: -webkit-transform .3s;
								transition: transform .3s, -webkit-transform .3s;
								position: absolute;
								top: 50%;
								left: 50%;
								margin-top: -0.28em;
								margin-left: -0.28em;

							}
							&::before {
								position: absolute;
								content: " ";
								top: 50%;
								left: 50%;
								height: 2px;
								width: 0.60em;
								background: #677388;
								margin-top: -1px;
							}
							&.right::after {
								@include arrowTransition(.3s, -45deg);
							}
							&.right::before {
								margin-left: -0.3885em;
							}
							&.left::after {
								@include arrowTransition(.3s, 135deg);
							}
							&.left::before {
								margin-left: -0.2em;
							}
						}
					}
					.dates {
						width: 2.857rem;
						height: 1.714rem;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 0.571rem;
						text-align: center;
						cursor: pointer;
						color: #C8CDD5;
						position: relative;
						z-index: 1;
						& > span {
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							z-index: 1;
							text-align: center;
							line-height: 1.714rem;
						}

					}
					.weeks {
						color: #677388;
						font-weight: 600;
						line-height: 16px;
						text-align: center;
						letter-spacing: 0.4px;
						cursor: default;
					}
					.day {
						color: #2C3C59;
					}
					.scope {
						color: #56A7FD;
					}
					.scope:before {
						content: ' ';
						position: absolute;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;
						z-index: 0;
						background: #D5E9FA;
					}
					.asingle:after {
						content: ' ';
						height: 1.714rem;
						width: 1.714rem;;
						position: absolute;
						top: 0;
						left: 50%;
						bottom: 0;
						margin-left: -0.857rem;
						border-radius: 100%;
						border: 1px solid #56A7FD;

					}
					.pitch-on {
						font-weight: 500;
						color: #FFFFFF !important;
					}
					.pitch-out {
						font-weight: 500;
						color: #FFFFFF !important;
					}
					.pitch-on:after, .pitch-out:after {
						content: ' ';
						height: 1.714rem;
						width: 1.714rem;
						position: absolute;
						top: 0;
						z-index: 0;
						background: #56A7FD;
						left: 50%;
						bottom: 0;
						margin-left: -0.82rem;
						border-radius: 100%;
						border: 1px solid #56A7FD;
					}
					.pitch-on:before {
						left: 50% !important;
					}
					.pitch-out:before {
						right: 50% !important;
					}


				}


			}
			.operation-box {
				display: flex;
				flex-wrap: nowrap;
				justify-content: flex-end;
				align-items: center;
				align-content: flex-end;
				text-align: right;
				width:100%;
				margin-top: 1.5rem;
				.btn{
					background: none;
					display: inline-block;
					color: #56A7FD;
					border: none;
					cursor: pointer;
					outline: 0;
					&:focus{
						background: none;
						color: #56A7FD;
						border: none;
						outline: 0;
					}
				}
				.apply{
					background: #56A7FD;
					border-radius: 4px;
					padding-left: 2.857rem;
					padding-right: 2.857rem;
					margin-left: 1rem;
					color: #FFFFFF;

				}
			}
		}

	}
	&table{
		border: none!important;
		&>thead{
			border: none!important;
			&>tr{
				border: none!important;
				&>th{
					text-align: center;
					border-right: #dee2e6 solid 1px;
					border-bottom: inherit;
					border-top: inherit;
					border-left: inherit;
					&:last-child {
						border-right:inherit;
					}
					&>i{
						font-size: 1.2rem;
						margin-left: 1rem;
					}
				}
			}
		}
		&>tbody{
			&>tr{
				&:nth-of-type(odd){
					background-color: rgba(0, 0, 0, 0.03);
				}
				&>th{
					text-align: center;

				}
				&>td{
					text-align: center;
					&.sort{
						padding: 0 1rem;
						background-color: #E9EBEF;
					}
					&>.sort-title{
						padding: 1rem 0.5rem!important;
						box-sizing: border-box;
						@include flexCenter(center);
						justify-content:flex-start;
						box-sizing: border-box;
						&> div:first-child{
							margin-right: 1rem;
							&>.unis-nabla-right,&>.unis-nabla{
								font-size: 18px;
								cursor: pointer;
							}
						}

					}
					&>.sort-box{
						margin-right:0.5rem;
						margin-left: 0.5rem;
						padding-right: 1rem;
						padding-left: 1rem;
						border-top: 1px solid #D3D8DE;
						&> table{
							margin-top: 1rem;
							background-color: #ffffff!important;

						}
					}

				}
			}

		}

	}
}